<template>
  <div class="map-container">
    <!-- 百度3D地图容器 -->
    <div id="baidu-map" class="baidu-map"></div>
    
    <!-- 左侧悬浮框（保留原有） -->
    <div class="left-panels">
      <div class="panel panel-top-left">
        <div class="panel-header"><h3>传感器监测</h3></div>
        <div class="panel-content">
          <div class="sensor-item"><span class="sensor-label">温度传感器</span><span class="sensor-value">25.6°C</span></div>
          <div class="sensor-item"><span class="sensor-label">压力传感器</span><span class="sensor-value">101.3kPa</span></div>
          <div class="sensor-item"><span class="sensor-label">液位传感器</span><span class="sensor-value">78%</span></div>
        </div>
      </div>
      <div class="panel panel-bottom-left">
        <div class="panel-header"><h3>报警信息</h3></div>
        <div class="panel-content">
          <div class="alarm-item"><span class="alarm-type warning">警告</span><span class="alarm-desc">温度过高</span></div>
          <div class="alarm-item"><span class="alarm-type danger">紧急</span><span class="alarm-desc">压力异常</span></div>
          <div class="alarm-item"><span class="alarm-type info">信息</span><span class="alarm-desc">设备维护提醒</span></div>
        </div>
      </div>
    </div>
    
    <!-- 右侧悬浮框（保留原有） -->
    <div class="right-panels">
      <div class="panel panel-top-right">
        <div class="panel-header"><h3>设备状态</h3></div>
        <div class="panel-content">
          <div class="device-item"><div class="device-status online"></div><span class="device-name">泵站A</span><span class="device-status-text">运行中</span></div>
          <div class="device-item"><div class="device-status offline"></div><span class="device-name">泵站B</span><span class="device-status-text">离线</span></div>
          <div class="device-item"><div class="device-status online"></div><span class="device-name">阀门C</span><span class="device-status-text">运行中</span></div>
        </div>
      </div>
      <div class="panel panel-bottom-right">
        <div class="panel-header"><h3>实时数据</h3></div>
        <div class="panel-content">
          <div class="data-item"><span class="data-label">流量</span><span class="data-value">125.6 m³/h</span></div>
          <div class="data-item"><span class="data-label">能耗</span><span class="data-value">45.2 kW</span></div>
          <div class="data-item"><span class="data-label">运行时间</span><span class="data-value">156h</span></div>
        </div>
      </div>
    </div>
    
    <!-- 地图上方内容（保留原有，新增地球模式提示） -->
    <div class="overlay-content">
      <h1>化工安全监控平台</h1>
      <p>基于百度地球模式的实时监控系统</p>
      <div class="map-controls">
        <button @click="zoomIn" class="control-btn"><i class="fa fa-search-plus"></i> 放大</button>
        <button @click="zoomOut" class="control-btn"><i class="fa fa-search-minus"></i> 缩小</button>
        <button @click="resetMap" class="control-btn"><i class="fa fa-refresh"></i> 重置</button>
        <button @click="toggleEarth" class="control-btn"><i class="fa fa-globe"></i> {{ isEarthMode ? '切换普通地图' : '切换地球模式' }}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaiduEarthMap',
  data() {
    return {
      map: null,
      isEarthMode: true, // 新增地球模式状态（替代原is3D）
      // 地图初始配置：适配地球模式的参数
      mapConfig: {
        center: { lng: 116.404680, lat: 39.905466 }, // 北京坐标（地球模式下仍可用）
        normalZoom: 12, // 普通地图初始缩放级别
        earthZoom: 5,   // 地球模式初始缩放级别（1-5级最佳）
        minZoom: 1,     // 地球模式支持最小缩放级别
        maxZoom: 19,    // 普通地图最大缩放级别
        normalPitch: 60, // 普通地图倾斜角度
        earthPitch: 45   // 地球模式倾斜角度（45°视觉效果最佳）
      }
    }
  },
  mounted() {
    this.initMap(); // 初始化地图（已默认设置地球模式）
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
    // 移除原重复的toggle3D调用，避免状态反转
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 初始化百度地图（核心修改：默认地球模式）
   // 初始化百度地图（核心修改：默认定位到指定位置并放大到最大）
initMap() {
  if (typeof BMapGL === 'undefined') {
    console.error('百度地图GL API加载失败，请检查密钥是否正确');
    return;
  }

  // 创建地图实例：默认启用旋转和倾斜（地球模式必需）
  this.map = new BMapGL.Map('baidu-map', {
    enableRotate: true,
    enableTilt: true,
    tilt: this.mapConfig.earthPitch // 初始倾斜角度（地球模式）
  });

  const point = new BMapGL.Point(
    this.mapConfig.center.lng,
    this.mapConfig.center.lat // 目标指定位置（北京坐标）
  );

  // 关键修改：1.先定位到指定位置 2.直接放大到最大级别
  this.map.centerAndZoom(point, this.mapConfig.maxZoom); // 缩放级别设为maxZoom（19）
  this.map.setCenter(point); // 强制锁定目标位置，避免放大后偏移
  this.map.setMapType(BMAP_EARTH_MAP); // 强制默认地球模式
  
  // 启用基础交互功能
  this.map.enableScrollWheelZoom(true);
  this.map.enableKeyboard();

  // 添加地图类型控件：仅保留"普通地图+地球模式"（避免冗余）
  this.map.addControl(new BMapGL.MapTypeControl({
    mapTypes: [BMAPGL_NORMAL_MAP, BMAP_EARTH_MAP],
    anchor: BMAP_ANCHOR_TOP_RIGHT
  }));

  // 添加整合型导航控件（包含缩放、旋转、倾斜，避免重复）
  this.map.addControl(new BMapGL.NavigationControl({
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT
  }));

  // 添加比例尺控件（保留原有）
  this.map.addControl(new BMapGL.ScaleControl());

  this.addMarkers(); // 保留原有标记点功能
},

    // 保留原有标记点逻辑（修复跨域问题：用SVG图标替代外部图片）
    addMarkers() {
      // 中心点标记（保留原有）
      const centerMarker = new BMapGL.Marker(
        new BMapGL.Point(this.mapConfig.center.lng, this.mapConfig.center.lat),
        { enableDragging: true, raiseOnDrag: true }
      );
      this.map.addOverlay(centerMarker);

      // 中心点信息窗口（保留原有）
      const infoWindow = new BMapGL.InfoWindow('这里是中心点', {
        width: 200, height: 100, title: '监控点信息'
      });
      centerMarker.addEventListener('click', () => {
        this.map.openInfoWindow(infoWindow, centerMarker.getPosition());
      });

      this.add3DEffectMarkers(); // 修复特效标记跨域问题
    },

    // 修复特效标记跨域：用SVG图标替代外部图片
    add3DEffectMarkers() {
      const positions = [
        { lng: this.mapConfig.center.lng + 0.005, lat: this.mapConfig.center.lat },
        { lng: this.mapConfig.center.lng - 0.005, lat: this.mapConfig.center.lat },
        { lng: this.mapConfig.center.lng, lat: this.mapConfig.center.lat + 0.005 },
        { lng: this.mapConfig.center.lng, lat: this.mapConfig.center.lat - 0.005 }
      ];
      const colors = ['red', 'blue', 'green', 'yellow'];
      const labels = ['泵站A', '泵站B', '阀门C', '监测站D'];

      positions.forEach((pos, index) => {
        const point = new BMapGL.Point(pos.lng, pos.lat);
        // SVG图标：避免跨域，自定义颜色
        const svgIcon = new BMapGL.Icon(
          `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='25' viewBox='0 0 23 25'%3E%3Ccircle cx='11.5' cy='12.5' r='10' fill='${colors[index]}' stroke='white' stroke-width='2'/%3E%3C/svg%3E`,
          new BMapGL.Size(23, 25),
          { offset: new BMapGL.Size(10, 25) }
        );

        const marker = new BMapGL.Marker(point, { icon: svgIcon });
        this.map.addOverlay(marker);

        // 保留原有标签样式
        const label = new BMapGL.Label(labels[index], {
          position: point, offset: new BMapGL.Size(30, -10)
        });
        label.setStyle({
          color: colors[index], fontSize: '12px',
          backgroundColor: 'transparent', border: 'none', fontWeight: 'bold'
        });
        this.map.addOverlay(label);
      });
    },

    // 地图放大（适配地球模式缩放范围）
    zoomIn() {
      if (this.map && this.map.getZoom() < this.mapConfig.maxZoom) {
        this.map.zoomIn();
      }
    },

    // 地图缩小（适配地球模式缩放范围）
    zoomOut() {
      if (this.map && this.map.getZoom() > this.mapConfig.minZoom) {
        this.map.zoomOut();
      }
    },

    // 重置地图：根据当前模式恢复对应参数
    resetMap() {
      if (this.map) {
        const point = new BMapGL.Point(
          this.mapConfig.center.lng,
          this.mapConfig.center.lat
        );
        // 重置缩放和倾斜角度（区分地球/普通模式）
        const resetZoom = this.isEarthMode ? this.mapConfig.earthZoom : this.mapConfig.normalZoom;
        const resetPitch = this.isEarthMode ? this.mapConfig.earthPitch : this.mapConfig.normalPitch;
        
        this.map.centerAndZoom(point, resetZoom);
        this.map.setTilt(resetPitch);
        this.map.setRotation(0); // 重置旋转角度
      }
    },

    // 新增：切换地球模式/普通地图
    toggleEarth() {
      if (!this.map) return;
      this.isEarthMode = !this.isEarthMode;

      if (this.isEarthMode) {
        // 切换到地球模式
        this.map.setMapType(BMAP_EARTH_MAP);
        this.map.setZoom(this.mapConfig.earthZoom);
        this.map.setTilt(this.mapConfig.earthPitch);
      } else {
        // 切换到普通3D地图
        this.map.setMapType(BMAPGL_NORMAL_MAP);
        this.map.setZoom(this.mapConfig.normalZoom);
        this.map.setTilt(this.mapConfig.normalPitch);
      }
    },

    // 保留原有窗口 resize 处理
    handleResize() {
      if (this.map) {
        setTimeout(() => this.map.resize(), 100);
      }
    }
  }
}
</script>

<style scoped>
/* 原有样式全部保留，无需修改 */
.map-container {
  position: relative;
  width: 97vw;
  height: 92vh;
  overflow: hidden;
}
.baidu-map { width: 100%; height: 100%; z-index: 1; }
.left-panels, .right-panels {
  position: absolute; top: 0; height: 100%; z-index: 10;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px; pointer-events: none;
}
.left-panels { left: 0; align-items: flex-start; }
.right-panels { right: 0; align-items: flex-end; }
.panel {
  width: 480px;
  background: linear-gradient(135deg, 
    rgba(11, 77, 124, 0.65) 0%, rgba(11, 77, 124, 0.5) 60%, rgba(11, 77, 124, 0.3) 100%);
  border: 1px solid rgba(32, 156, 238, 0.4);
  border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); pointer-events: auto;
  transition: all 0.3s ease; overflow: hidden;
}
.panel:hover {
  transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(32, 156, 238, 0.6);
}
.panel-header {
  background: linear-gradient(90deg, 
    rgba(32, 156, 238, 0.2) 0%, rgba(32, 156, 238, 0.05) 100%);
  padding: 12px 16px; border-bottom: 1px solid rgba(32, 156, 238, 0.2);
}
.panel-header h3 {
  margin: 0; color: #6bc9ff; font-size: 14px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.panel-content { padding: 16px; }
.sensor-item, .alarm-item, .device-item, .data-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sensor-item:last-child, .alarm-item:last-child, .device-item:last-child, .data-item:last-child { border-bottom: none; }
.sensor-label, .data-label { color: #b4e1ff; font-size: 12px; }
.sensor-value, .data-value { color: #fff; font-size: 12px; font-weight: 600; }
.alarm-type {
  padding: 2px 8px; border-radius: 4px; font-size: 10px;
  font-weight: 600; text-transform: uppercase;
}
.alarm-type.warning { background: rgba(255, 193, 7, 0.3); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.5); }
.alarm-type.danger { background: rgba(220, 53, 69, 0.3); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.5); }
.alarm-type.info { background: rgba(23, 162, 184, 0.3); color: #17a2b8; border: 1px solid rgba(23, 162, 184, 0.5); }
.alarm-desc { color: #fff; font-size: 12px; flex: 1; margin-left: 8px; }
.device-status { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.device-status.online { background: #28a745; box-shadow: 0 0 8px rgba(40, 167, 69, 0.6); }
.device-status.offline { background: #6c757d; box-shadow: 0 0 8px rgba(108, 117, 125, 0.6); }
.device-name { color: #b4e1ff; font-size: 12px; flex: 1; }
.device-status-text { color: #fff; font-size: 11px; font-weight: 600; }
.overlay-content {
  position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10; text-align: center; color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); pointer-events: none;
}
.overlay-content h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
.overlay-content p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; }
.map-controls { display: flex; gap: 12px; justify-content: center; pointer-events: auto; }
.control-btn {
  background: linear-gradient(135deg, 
    rgba(32, 156, 238, 0.8) 0%, rgba(11, 77, 124, 0.8) 100%);
  color: white; border: 1px solid rgba(32, 156, 238, 0.6);
  padding: 10px 20px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.3s ease; backdrop-filter: blur(5px); font-weight: 600;
}
.control-btn:hover {
  background: linear-gradient(135deg, 
    rgba(32, 156, 238, 1) 0%, rgba(11, 77, 124, 1) 100%);
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(32, 156, 238, 0.4);
}
@media (max-width: 768px) {
  .left-panels, .right-panels { padding: 10px; }
  .panel { width: 240px; }
  .overlay-content h1 { font-size: 1.8rem; }
  .overlay-content p { font-size: 1rem; }
  .map-controls { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .left-panels, .right-panels {
    position: static; flex-direction: row; flex-wrap: wrap;
    justify-content: center; gap: 10px;
  }
  .panel { width: calc(50% - 20px); min-width: 200px; }
}
</style>